<template>
    <div class="box">
        <h1>todoList日程表</h1>

        <div class="iptBox">
            <input  ref="ipt" type="text" placeholder="写点东西啥的吧~" @keyup.enter="submitBtn">
            <button @click="submitBtn">提交</button>
        </div>

        <div class="toDoing" v-if="toDoingThingShow">
            <h1>待完成的任务</h1>
            <ul v-for="(item,index) in notfinishedTaskList" :key="index">
              <li  @click="clkTaskList(index)" :class="`${index==currentIndex?'active':''} `" >
                <input type="checkbox" ref="tickBox" /> {{index+1}}----- {{item}}   <button @click.stop="delTask(index)">删除</button>
              </li>
             </ul>
        </div>

        <div class="Finished" v-if="toDoneThingsShow">
            <h1>已完成的任务</h1>
            <ul v-for="(item,index) in finishedTaskList" :key="index">
                <li>
                    <input type="checkbox" ref="" /> {{index}}----- {{item}}   <button>删除</button>
                </li>
            </ul>
        </div>

        <div class="footer">
            <div>还有{{notfinishedTaskList.length}} 件没做完</div>
            <div class="showAllList" @click="showAllThings">显示所有任务</div>
            <div @click="doingThings">正在执行的任务</div>
            <div @click="doneThings">已完成的任务</div> 
            <div @click="clearFinishedLish">清空已完成</div>
            <div @click="clearAllTask">清空所有</div>
        </div>
       



        <!-- <div class="right">右边内容</div> -->
    </div>
</template>


<script>
export default{
    data(){
        return{
            toDoingThingShow:true,  //默认显示未完成的待办事项
            toDoneThingsShow:true,   //默认显示已完成的待办事项
            showAllTaskList:true,   //默认显示所有待办事项列表
            currentIndex:undefined,   //当前指向的待办索引
            finishedTaskList:[],   //已完成的事项列表
            notfinishedTaskList:[],   //未完成的待办事项列表

        }
    },
    methods:{
        //提交待办事项
        submitBtn(){
            //获取输入框的内容
            let iptContent = this.$refs.ipt.value
            var arrayList = []  //定义一个空数组  

            //如果输入框什么都没输入或者输入的是空间，则不执行任何操作
            if(!iptContent || !iptContent.trim()) return;

            //判断localStorage里是否有内容
            if(localStorage.getItem('NotfinishedTaskList')){
                //第一次获取本地数据,把本地的数据转换成数组     
                var temp = localStorage.NotfinishedTaskList.split(',')
                arrayList =temp
                //向arrayList数组里面去追加输入框里面的数据
                arrayList.unshift(iptContent)
                //把arrayList里面的数据又放到localStorage存放  
                //如果直接把数组里面的内容发到本地存储中去localStorage.NotfinishedTaskList = arrayList， localStorage会把数组当成字符串来存储，所以在用到这些数据的时候需要把字符串转换成数组
                localStorage.NotfinishedTaskList = arrayList
                
            }else{
                localStorage.setItem('NotfinishedTaskList',iptContent)
            }
            
            this.getData()
            this.$refs.ipt.value = ''
        },
        //获取数据
        getData(){
            this.notfinishedTaskList = localStorage.getItem('NotfinishedTaskList') ? localStorage.NotfinishedTaskList.split(',') :''
            //已完成的任务
            
            //获取已完成的任务，如果有任务，则把直接从本地存储中拿过来，如果没有在完成任务列表为空数组
            if(localStorage.hasDoneList){
                this.finishedTaskList = localStorage.hasDoneList.split(',')
            }else{
                this.finishedTaskList=[]
            }

            //三木表达式写法
            // localStorage.hasDoneList? this.finishedTaskList = localStorage.hasDoneList.split(',') :this.finishedTaskList=[]


        },

        //清空所有
        clearAllTask(){
            localStorage.removeItem('NotfinishedTaskList')
            localStorage.removeItem('hasDoneList')     
            this.getData()
        },

        //点击当前那个任务事项
        clkTaskList(index){
            //把index的值赋值给当前的currentIndex
            this.currentIndex = index 
        
            if(this.$refs.tickBox[index].checked){
                console.log('its me!!!')

                //勾选 完成的任务 名称
                let temp = this.notfinishedTaskList.splice(index,1)
                
                //把最新未完成的列表赋值给localStorage
                localStorage.NotfinishedTaskList = this.notfinishedTaskList
                // console.log('temp的值是',temp[0])

                
                //新增一条已完成的待办事项
                this.finishedTaskList.unshift(temp[0])


                // console.log('已完成的数据',this.finishedTaskList)
                localStorage.setItem('hasDoneList',this.finishedTaskList)
                
                

                //则让当前的currentIndex位空
                this.currentIndex = undefined


                //让未完成列表的勾选都为false
                for(let i = 0  ;i<this.notfinishedTaskList.length;i++){
                    this.$refs.tickBox[i].checked =false
                }
            }
        },


        //删除事项
        delTask(index){    
            //删除下标为index的1个元素
            this.notfinishedTaskList.splice(index,1)
            //把删除后的数组重新保存到localStorage里去
            localStorage.NotfinishedTaskList = this.notfinishedTaskList
            //把当前的currentIndex索引设为空
            this.currentIndex = undefined
        },

        //清空已完成的任务列表
        clearFinishedLish(){
            localStorage.removeItem('hasDoneList')
            this.getData()
        },

        //正在做的待办事项
        doingThings(){
            this.toDoneThingsShow = false
            this.toDoingThingShow = true
        },

        //已完成的待办事项
        doneThings(){
            this.toDoingThingShow = false
            this.toDoneThingsShow = true
        },


        //显示所有的待办事项 （已完成和未完成）
        showAllThings(){
            this.toDoingThingShow = true
            this.toDoneThingsShow = true
        }
    },

    mounted(){
        //挂载时加载 未完成 和已完成的  数据
        this.getData()
    }

 
}
</script>

<style lang="scss">

//默认显示所有的任务列表项
.showAllList{
    color: blue;
    border: 2px solid yellow;
}


.active{
    color: red;
}

.linethrough{
    text-decoration: line-through;
}

html,body{
    margin: 0;
}
.box{
    background-color: lightblue;
    .toDoing,.Finished{
        h1{
            margin-left: 30px;
        }
        ul{
            list-style: none;
        }
    }

    .footer{
        display: flex;
        justify-content:space-evenly;

        margin-bottom: 50px;
    }
}

</style>